<template>
  <div class="chart-container" ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let myChart = null

onMounted(() => {
  myChart = echarts.init(chartRef.value)
  
  const option = {
    title: {
      text: '部门员工分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '员工数量',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 50, name: '研发部' },
          { value: 30, name: '市场部' },
          { value: 20, name: '运营部' },
          { value: 15, name: '人力资源部' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  myChart.setOption(option)
  
  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  if (myChart) {
    myChart.resize()
  }
}
</script>

<style scoped>
.chart-container {
  margin-bottom: 20px;
}
</style>    